<template>
  <div class="">
    <div class="text-[18px] font-[400]">{{ data?.title }}</div>
    <div class="content">
      <div class="leading-[24px]" v-html="data?.content"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { artical } from "@/mock/data/artical";
const route = useRoute();
const data = ref({});
onMounted(() => {
  loadArtical(route.params.key);
});

const loadArtical = (key) => {
  key = decodeURIComponent(key);
  data.value = artical.find((x) => x.title == key);
  document.title = data.value?.title;
};

watch(
  () => route.params.key,
  (key) => {
    loadArtical(key);
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.content {
  font-size: 16px !important;
  :deep(span) {
    font-size: 16px !important;
  }
  :deep(table) {
    border-collapse: collapse;
    width: 100% !important;
    td {
      border: 1px solid #e1e1e1 !important;
      text-align: center !important;
      p {
        text-align: center !important;
      }
    }
  }
}
</style>
